import React, { Component } from 'react';
import { GLOBAL } from '../../../../config/global';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  PixelRatio,
  TextInput,
  FlatList,
  Alert,
  ScrollView,
  Dimensions,
  ImageBackground
} from "react-native";
import { style } from '../../../../theme/style';
import { Common } from '../../../../component/common/Common.js';
import { PageStatusIndex } from '../../../../component/page-status/PageStatusIndex';
import ToastUtil from '../../../../utils/toast';
import HTTP from '../../../../utils/http';
import { API, API_GENERATE } from '../../../../config/api';
import { RefuseModal } from '../../../../component/ModalVerifylComponent.js';
import { StateLightBox } from '../../../../component/Store';
import { DashLine } from '../../../../components/common/DashLine';

const scale = GLOBAL.SCALE;
const ScreenWidth = Dimensions.get('window').width;
const ScreenHeight = Dimensions.get('window').height;
const checkOn = require('../../../../imgs/checkOn.png');
const checkOff = require('../../../../imgs/checkOff.png');
const searchIcon = require('../../../../imgs/global/whiteSearch.png');

export class OperatePlanApprovalDetailPage extends Component {
  static navigationOptions = ({ navigation, navigationOptions }) => {
    let { approveInfo, isNew } = navigation.state.params;
    let title = '';
    // isNew  普通提报-0 临增计划-1
    if (isNew && isNew == 1) {
      title = `${approveInfo.month.substr(-2, 2)}月临增计划(${approveInfo.bizTypeName}) 待审`
    } else {
      title = approveInfo.processCode == 'MANAGER_AUDIT' ? approveInfo.month.substr(-2, 2) + '月 ' + approveInfo.bizTypeName + approveInfo.planTypeName + '计划'
        : approveInfo.month.substr(-2, 2) + '月' + approveInfo.planTypeName + '计划' + '(' + approveInfo.bizTypeName + ')' + '-待审'
    }

    return {
      title,
      headerTintColor: '#fff',
      headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
      headerStyle: style.head.headerStyle,
    }
  }

  constructor(props) {
    super(props);
    this.state = {
      status: 'data',
      departmentList: [],
      selectedDepartment: '',
      productList: [],
      selectAll: false,
      refreshIcon: false, // 下拉刷新图标
      showRejectModal: false,
      lightBoxData: {
        modalVisible: false,
        onClosePress: this._closeLightBox,
        title: '',
        rowDataList: [],
      },
      readyApproveCount: 0, //已批量
      waitApproveCount: 0, // 待批量
      waitApproveAllCount: 0, // 待批总量
    }
    let { approveInfo, isNew } = props.navigation.state.params;
    this.isNew = isNew
    this.selectedProduct = []; // 选中的商品（有categoryId重复的情况） 由于categoryId+index组成
    this.categorys = []; // 选中的商品 (categoryId不重复)
    this.categorysRepet = []; // 选中的商品 (categoryId重复)
    this.onRefresh = true; // 判断是整个页面刷新还是下拉刷新
    this.totalPage = 1;
    this.managerApprove = approveInfo.processCode == 'MANAGER_AUDIT';  // true-部门经理 / false-经营计划部和公司领导
    this.pageParams = {
      pageNo: 1,
      pageSize: 10,
      searchKey: '',
      isNew
    };
    this.approveParams = {
      processCode: approveInfo.processCode || '',
      planId: approveInfo.planId || '',
      organId: this.managerApprove ? approveInfo.organList[0].organId : '',
    };
  }

  async componentWillMount () {
    if (this.managerApprove) {
      this.initPage();
    } else {
      await this.initDepartment();
    }
  }

  async initDepartment () {
    this.setState({
      status: 'loading'
    })
    let responseData = await HTTP.GET(API_GENERATE(API.OPERATE_PLAN_APPROVAL_LIST), { isNew: this.isNew });
    let departmentList = [];
    let { selectedDepartment } = this.state;
    let currentDepartment = '';
    responseData.forEach(item => {
      if (item.planId == this.approveParams.planId && item.processCode == this.approveParams.processCode) departmentList = item.organList
    })
    if (departmentList.length == 0) {
      this.props.navigation.goBack();
      return;
    }
    departmentList.forEach((item, index) => {
      if (item.organId == selectedDepartment) currentDepartment = selectedDepartment;
    })
    this.approveParams.organId = currentDepartment ? currentDepartment : departmentList[0].organId;
    this.setState({
      departmentList,
      status: 'data',
      selectedDepartment: currentDepartment ? currentDepartment : departmentList[0].organId,
    }, () => {
      this.initPage();
    })
  }

  async initPage () {
    let params = Object.assign(this.pageParams, this.approveParams)
    this.setState({
      status: this.onRefresh ? 'loading' : 'data',
      refreshIcon: !this.onRefresh && this.pageParams.pageNo == '1'
    })
    let url = this.managerApprove ? API.OPERATE_PLAN_MANAGER_APPROVAL_DETAIL : API.OPERATE_PLAN_APPROVAL_DETAIL;
    let res = await HTTP.POST(API_GENERATE(url), params);
    if (res) {
      this.totalPage = res.totalPage;
      res.rows.forEach(item => {
        item.selected = false;
      })
      if (this.pageParams.pageNo == '1') {
        this.selectedProduct = [];
        this.categorys = [];
        this.categorysRepet = [];
      }
      this.setState({
        status: res.rows.length > 0 ? 'data' : 'empty',
        productList: this.pageParams.pageNo == '1' ? res.rows : this.state.productList.concat(res.rows),
        refreshIcon: false,
        readyApproveCount: this.pageParams.pageNo == '1' ? 0 : this.state.readyApproveCount,
        waitApproveCount: this.pageParams.pageNo == '1' ? 0 : this.state.waitApproveCount,
        waitApproveAllCount: this.pageParams.pageNo == '1' ? 0 : this.state.waitApproveAllCount,
        selectAll: false
      })
    } else {
      this.setState({
        refreshIcon: false,
        status: 'error'
      })
    }
  }

  _closeLightBox = () => {
    let { lightBoxData } = this.state;
    lightBoxData.modalVisible = false;
    this.setState({ lightBoxData });
  }

  //获取审批进度
  getApproveProcess = async () => {
    if (this.selectedProduct.length == 1) {
      let planDetailIds = [];
      let { productList } = this.state;
      productList.forEach((item, index) => {
        let category = item.categoryId + index;
        if (this.selectedProduct.indexOf(category) != -1) {
          planDetailIds = planDetailIds.concat(item.detailIdList);
        }
      })
      this.setState({
        status: 'loading'
      })
      let responseData = await HTTP.POST(API_GENERATE(API.OPERATE_PLAN_APPROVAL_LOG), { planDetailIds, isNew: this.isNew });
      if (responseData && responseData.length > 0) {
        let res = [];
        responseData.forEach(item => {
          res.unshift(item)
        })
        let { lightBoxData } = this.state;
        lightBoxData.modalVisible = true;
        lightBoxData.title = '审批进度';
        let rowDataList = [];
        if (this.isNew == 0) {
          rowDataList[0] = {
            taskName: '副总经理',
            logId: false
          }
        }
        rowDataList[1] = {
          taskName: res.length > 2 ? '经营计划总助 | ' + res[1].staffName : '经营计划总助',
          auditTime: res.length > 2 ? res[1].auditDate : '',
          auditResult: res.length > 2 ? 1 : '',
          logId: res.length > 2
        }
        rowDataList[2] = {
          taskName: '经营计划部主管 | ' + res[0].staffName,
          auditTime: res[0].auditDate,
          auditResult: 1,
          logId: true
        }
        lightBoxData.rowDataList = rowDataList;
        this.setState({ lightBoxData, status: 'data' });
      } else {
        this.setState({ status: 'data' });
      }
    } else {
      ToastUtil.showWarning('请选择单个商品！')
    }
  }

  selectProduct = (index, data) => {
    let { categoryId, selected } = data;
    let { productList, readyApproveCount, waitApproveCount, waitApproveAllCount } = this.state;
    let readyCount = parseFloat(readyApproveCount) || 0;
    let waitCount = parseFloat(waitApproveCount) || 0;
    let waitAllCount = parseFloat(waitApproveAllCount) || 0;
    let selectAll = true;
    productList.forEach((item, i) => {
      if (index == i && item.categoryId == categoryId) {
        item.selected = !selected;
        if (item.selected) {
          this.selectedProduct.push(categoryId + i);
          this.categorysRepet.push(categoryId);
          // 如果是同样的商品，只加一次已批量
          if (this.categorys.indexOf(categoryId) == '-1') {
            this.categorys.push(categoryId);
            readyCount += parseFloat(item.passWeight) || 0;
          }
          waitCount += parseFloat(item.suggestWeight) || 0;
          waitAllCount += parseFloat(item.totalWeight) || 0;
        } else {
          let index = this.selectedProduct.indexOf(categoryId + i);
          this.selectedProduct.splice(index, 1)
          this.categorysRepet.splice(index, 1);
          // 只有一个同样的商品时，才减去已批量
          if (this.categorysRepet.indexOf(categoryId) == '-1') {
            this.categorys.splice(this.categorys.indexOf(categoryId), 1);
            readyCount -= parseFloat(item.passWeight) || 0;
          }
          waitCount -= parseFloat(item.suggestWeight) || 0;
          waitAllCount -= parseFloat(item.totalWeight) || 0;
        }
      }
      if (!item.selected) selectAll = false;
    })
    this.setState({ productList, selectAll, readyApproveCount: readyCount, waitApproveCount: waitCount, waitApproveAllCount: waitAllCount })
  }

  selectAll = () => {
    let { productList, selectAll } = this.state;
    let toggleSelect = !selectAll;
    let waitApproveCount = 0;
    let readyApproveCount = 0;
    let waitApproveAllCount = 0;
    this.selectedProduct = [];
    this.categorys = [];
    this.categorysRepet = [];
    productList.forEach((item, index) => {
      item.selected = toggleSelect;
      if (toggleSelect) {
        let categoryId = item.categoryId + index
        this.selectedProduct.push(categoryId);
        this.categorysRepet.push(item.categoryId);
        // 同样的商品只加一次已批量
        if (this.categorys.indexOf(item.categoryId) == '-1') {
          this.categorys.push(item.categoryId);
          readyApproveCount = readyApproveCount + parseFloat(item.passWeight) || 0;
        }
        waitApproveCount = waitApproveCount + parseFloat(item.suggestWeight) || 0;
        waitApproveAllCount = waitApproveAllCount + parseFloat(item.totalWeight) || 0;
      }
    })
    this.setState({
      productList,
      selectAll: toggleSelect,
      readyApproveCount,
      waitApproveCount,
      waitApproveAllCount,
    })
  }

  selectedDepartment = (organId) => {
    let { selectedDepartment, departmentList } = this.state;
    if (selectedDepartment == organId) return;
    this.approveParams.organId = organId;
    this.setState({
      selectedDepartment: organId,
      selectAll: false,
    }, () => {
      let containerWidth = ScreenWidth - 34; // 滚动区域宽度
      let maxScrollX = 0; // 最大滚动距离
      this.refs[departmentList[departmentList.length - 1].organId].measure((fx, fy, width, height, px, py) => {
        let scroll = fx - containerWidth + width + 17
        maxScrollX = scroll > 0 ? scroll : 0;
      })
      this.refs[organId].measure((fx, fy, width, height, px, py) => {
        let offsetLeftToFrame = fx; // 选择元素在父元素的距离
        let nodeWidth = width; // 元素宽度
        let scrollX = offsetLeftToFrame - containerWidth / 2 + nodeWidth / 2;
        if (scrollX < 0) scrollX = 0;
        if (scrollX > maxScrollX) scrollX = maxScrollX;
        this.scrollView.scrollTo({ x: scrollX, animated: true })
      })
      this.pageParams.pageNo = 1;
      this.onRefresh = true;
      this.initPage();
    })
  }

  // 下拉刷新
  refresh = () => {
    this.pageParams.pageNo = 1;
    this.onRefresh = false;
    this.initPage();
  }

  // 加载更多
  loadMore = () => {
    if (this.totalPage > this.pageParams.pageNo) {
      this.pageParams.pageNo++;
      this.onRefresh = false;
      this.initPage();
    }
  }

  onErrorRefresh = () => {
    this.pageParams.pageNo = 1;
    this.onRefresh = true;
    this.initPage();
  }

  // 驳回
  rejectConfirm = (remark) => {
    this.setState({
      showRejectModal: false
    }, () => {
      if (remark) {
        this.approve({ audit: 0, remark });
      } else {
        ToastUtil.showWarning('请填写驳回原因！');
      }
    })

  }

  // 审批通过确认
  approveConfirm = () => {
    if (this.selectedProduct.length > 0) {
      Alert.alert('提示', '是否确认审批通过？', [
        { text: '取消' },
        { text: '确定', onPress: () => { this.approve({ audit: 1 }) } },
      ]);
    } else {
      ToastUtil.showWarning('请选择商品！');
    }
  }

  // 审批通过
  approve = async (data) => {
    let planDetailIds = [];
    let { productList } = this.state;
    productList.forEach((item, index) => {
      let category = item.categoryId + index;
      if (this.selectedProduct.indexOf(category) != -1) {
        planDetailIds = planDetailIds.concat(item.detailIdList);
      }
    })
    let params = {
      audit: data.audit,
      planDetailIds,
      remark: data.remark
    };
    let requestParams = Object.assign(params, this.approveParams);
    let text = data.audit == 0 ? '驳回' : '通过'
    this.setState({
      status: 'loading'
    })
    let res = await HTTP.POST(API_GENERATE(API.OPERATE_PLAN_APPROVAL), requestParams);
    if (res) {
      ToastUtil.showSuccess(`${text}成功`).then(() => {
        this.onRefresh = true;
        this.pageParams.pageNo = 1;
        if (this.managerApprove) {
          this.initPage();
        } else {
          this.initDepartment();
        }
      })
    } else {
      this.setState({
        status: 'data'
      }, () => {
        ToastUtil.showWarning(`${text}失败`);
      })
    }
  }

  goProductPage = (suggestWeight, planDetailIds, categoryName) => {
    let { approveInfo } = this.props.navigation.state.params;
    let { departmentList } = this.state;
    let params = {
      suggestWeight,
      planDetailIds,
      categoryName,
      organId: this.approveParams.organId
    }
    if (this.managerApprove) {
      params.organName = approveInfo.organList[0].organName
    } else {
      departmentList.forEach(item => {
        if (params.organId == item.organId) params.organName = item.organName
      })
    }
    this.props.navigation.navigate('OperatePlanProductDetailPage', params)
  }

  _renderProductList = (data) => {
    let { productList } = this.state;
    let item = data.item
    return (
      <View>
        <View style={{ flexDirection: 'row', paddingTop: 12 * scale, paddingBottom: 12 * scale, position: 'relative' }}>
          <TouchableOpacity style={styles.selectIcon} activeOpacity={.6} onPress={() => { this.selectProduct(data.index, item) }}>
            <Image source={item.selected ? checkOn : checkOff} />
          </TouchableOpacity>
          <TouchableOpacity activeOpacity={.6} style={{ flexDirection: 'row' }} onPress={() => { this.goProductPage(item.suggestWeight, item.detailIdList, item.categoryName) }}>
            <View style={{ width: '45%', paddingLeft: 50 * scale }}>
              <Text style={{ color: '#272727', fontWeight: 'bold', }}>{item.categoryName}</Text>
            </View>
            <View style={{ width: '55%', paddingLeft: 6 * scale, paddingRight: 6 * scale }}>
              <Text style={{ color: '#272727', fontWeight: 'bold', }}>{item.suggestWeight || '0'}</Text>
              <View style={{ marginTop: 6 * scale, marginBottom: 6 * scale, flexDirection: 'row' }}>
                <Text style={styles.itemText}>当月已批总量(吨)</Text>
                <Text style={styles.itemNumber}>{item.passWeight || '0'}</Text>
              </View>
              <View style={{ flexDirection: 'row' }}>
                <Text style={styles.itemText}>上月总量(吨)</Text>
                <Text style={styles.itemNumber}>{item.lastMonthWeight || '0'}</Text>
              </View>
              {
                this.managerApprove ? (
                  <View style={{ flexDirection: 'row', marginTop: 6 * scale }}>
                    <Text style={styles.itemText}>业务员</Text>
                    <Text style={styles.itemNumber}>{item.staffName || '--'}</Text>
                  </View>
                ) : null
              }
            </View>
          </TouchableOpacity>
        </View>
        {
          data.index == productList.length - 1 ? null : (
            <View style={{ paddingLeft: 12 * scale, paddingRight: 12 * scale }}>
              <DashLine />
            </View>
          )
        }
      </View>
    )
  }

  _renderDepartmentList = () => {
    let { departmentList, selectedDepartment } = this.state;
    return (
      <View style={styles.departmentWrap}>
        <ScrollView
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          ref={(view) => { this.scrollView = view; }}
          onScroll={(e) => { this.scrollX = e.nativeEvent.contentOffset.x }}
        >
          {
            departmentList.map((item, index) => {
              return (
                <TouchableOpacity key={index} style={[styles.departmentItems, item.organId == selectedDepartment ? styles.selectedDepartment : '']} onPress={() => { this.selectedDepartment(item.organId) }} ref={item.organId}>
                  <Text style={[{ color: '#fff' }, item.organId == selectedDepartment ? { opacity: 1 } : { opacity: 0.65 }]}>{item.organName}</Text>
                </TouchableOpacity>
              )
            })
          }
        </ScrollView>
      </View>
    )
  }

  _renderFilterWrap = () => {
    let { approveInfo } = this.props.navigation.state.params;
    return (
      <View style={styles.filterWrap}>
        <View style={styles.departmentName}>
          <Text numberOfLines={1} style={{ color: '#fff', opacity: .8 }}>{approveInfo.organList[0].organName || '--'}</Text>
        </View>
        <View style={{ position: 'relative' }}>
          <Image source={searchIcon} style={styles.searchIcon} />
          <TextInput
            ref={'searchInput'}
            style={styles.searchInput}
            underlineColorAndroid='transparent'
            placeholder={'请输入三级商品名称'}
            placeholderTextColor="rgba(255, 255, 255, .8)"
            maxLength={30}
            returnKeyType={'search'}
            defaultValue={this.pageParams.searchKey}
            onChangeText={(txt) => { this.pageParams.searchKey = txt }}
            onSubmitEditing={() => {
              this.pageParams.pageNo = 1;
              this.onRefresh = true;
              this.initPage();
            }}
          />
        </View>
      </View >
    )
  }

  render () {
    let { status, selectAll, productList, refreshIcon, showRejectModal, lightBoxData, readyApproveCount, waitApproveCount, waitApproveAllCount } = this.state;
    let { approveInfo } = this.props.navigation.state.params;
    return (
      <View style={styles.container}>
        {
          this.managerApprove ? this._renderFilterWrap() : this._renderDepartmentList()
        }
        {
          this.managerApprove ? (
            <View>
              <View style={{ height: 43 * scale, backgroundColor: style.color.themeColor }}></View>
              <View style={[styles.sumBox, { marginTop: -24 * scale }]}>
                <View style={[styles.sumWrap, { height: 48 * scale }]}>
                  <View style={{ width: '100%', height: '100%' }}>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', height: '100%' }}>
                      <View style={{ flexDirection: 'row', flex: 1, alignItems: 'center' }}>
                        <Text style={styles.sumText}>已批量(吨)</Text>
                        <Text style={[styles.sumNumber, { fontSize: 18 * scale }]} numberOfLines={2}>{readyApproveCount}</Text>
                      </View>
                      <View style={{ flexDirection: 'row', flex: 1, alignItems: 'center' }}>
                        <Text style={styles.sumText}>待批量(吨)</Text>
                        <Text style={[styles.sumNumber, { fontSize: 18 * scale }]} numberOfLines={2}>{waitApproveCount}</Text>
                      </View>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          ) : (
              <View>
                <View style={{ height: 62 * scale, backgroundColor: style.color.themeColor }}></View>
                <View style={styles.sumBox}>
                  <View style={styles.sumWrap}>
                    <View style={{ width: 263 * scale, height: '100%' }}>
                      <View style={{ flexDirection: 'row', alignItems: 'center', height: 44 * scale }}>
                        <Text style={styles.sumText}>待批总量(吨)-总部门</Text>
                        <Text style={styles.sumNumber} numberOfLines={2}>{waitApproveAllCount}</Text>
                      </View>
                      <DashLine />
                      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', height: 44 * scale }}>
                        <View style={{ flexDirection: 'row', flex: 1 }}>
                          <Text style={styles.sumText}>已批量(吨)</Text>
                          <Text style={styles.sumNumber} numberOfLines={2}>{readyApproveCount}</Text>
                        </View>
                        <View style={{ flexDirection: 'row', flex: 1 }}>
                          <Text style={styles.sumText}>待批量(吨)</Text>
                          <Text style={styles.sumNumber} numberOfLines={2}>{waitApproveCount}</Text>
                        </View>
                      </View>
                    </View>
                    <TouchableOpacity style={{ width: 76 * scale, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }} onPress={() => { this.getApproveProcess() }}>
                      <Text style={{ color: '#148CFB' }}>审批流</Text>
                    </TouchableOpacity>
                  </View>
                </View>
              </View>
            )
        }

        <View style={styles.tipsWrap}>
          <Text style={styles.tipsLine}></Text>
          <Text style={styles.tips}>选择商品后,系统可以自动计算对应审批量</Text>
          <Text style={styles.tipsLine}></Text>
        </View>

        <View style={styles.productListWrap}>

          <View style={styles.flatList}>
            <View style={{ flexDirection: 'row', marginTop: 12 * scale, marginBottom: 4 * scale }}>
              <Text style={{ color: '#272727', fontSize: 13 * scale, width: '45%', paddingLeft: 50 * scale }}>商品名称</Text>
              <Text style={{ color: '#272727', fontSize: 13 * scale, width: '55%', paddingLeft: 6 * scale }}>{this.isNew == 1 ? '临增计划(吨)' : '当月计划(吨)'}</Text>
            </View>

            <FlatList
              data={productList}
              renderItem={this._renderProductList}
              refreshing={refreshIcon}
              onRefresh={() => { this.refresh() }}
              onEndReachedThreshold={0.1}
              onEndReached={() => { this.loadMore() }}
            />

            {
              status != 'data' ? (
                <View style={{ position: 'absolute', height: '100%', width: '100%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                  <PageStatusIndex status={status} emptyText="暂无记录" onErrorPress={this.onErrorRefresh} />
                </View>
              ) : null
            }
          </View>

        </View>

        <View style={styles.operateWrap}>
          <TouchableOpacity style={{ paddingLeft: 12 * scale, paddingRight: 12 * scale, height: '100%', flexDirection: 'row', alignItems: 'center' }} onPress={() => { this.selectAll() }}>
            <Text style={selectAll ? { color: '#0E7FFD' } : { color: '#272727' }}>全选</Text>
          </TouchableOpacity>
          <View style={{ flexDirection: 'row' }}>
            <TouchableOpacity style={[styles.operateBtn, this.selectedProduct.length > 0 ? { backgroundColor: '#FA4516' } : '']} onPress={() => {
              if (this.selectedProduct.length > 0) {
                this.setState({
                  showRejectModal: true,
                })
              } else {
                ToastUtil.showWarning('请选择商品！')
              }
            }}>
              <Text style={[{ color: '#272727', fontSize: 12 * scale }, this.selectedProduct.length > 0 ? { color: '#fff' } : '']}>驳回</Text>
            </TouchableOpacity>
            <TouchableOpacity style={[styles.operateBtn, this.selectedProduct.length > 0 ? { backgroundColor: '#148CFB' } : '']} onPress={() => { this.approveConfirm() }}>
              <Text style={[{ color: '#272727', fontSize: 12 * scale }, this.selectedProduct.length > 0 ? { color: '#fff' } : '']}>通过</Text>
            </TouchableOpacity>
          </View>
        </View>

        <RefuseModal visible={showRejectModal}
          placeholderText={'请输入驳回原因'}
          titleText={'驳回原因'}
          btnPress={(text) => {
            this.rejectConfirm(text);
          }}
          bgPress={() => {
            this.setState({
              showRejectModal: false,
            });
          }} />

        <StateLightBox  {...lightBoxData} textStyle={{ marginLeft: 15 * scale, marginRight: 5 * scale }} />

      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  departmentWrap: {
    backgroundColor: style.color.themeColor,
    width: ScreenWidth,
    height: 34 * scale,
    paddingLeft: 17 * scale,
    paddingRight: 17 * scale,
  },
  departmentItems: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 26 * scale,
  },
  selectedDepartment: {
    borderBottomWidth: 1,
    borderBottomColor: '#fff',
    borderStyle: 'solid',
  },
  sumBox: {
    marginTop: -45 * scale,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  sumWrap: {
    width: 351 * scale,
    height: 90 * scale,
    backgroundColor: '#fff',
    borderRadius: 4 * scale,
    flexDirection: 'row',
    paddingLeft: 12 * scale,
  },
  sumText: {
    fontSize: 13 * scale,
    opacity: .6,
    color: '#272727',
    marginRight: 8 * scale,
  },
  sumNumber: {
    fontSize: 14 * scale,
    color: '#272727',
    flex: 1
  },
  tipsWrap: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    opacity: .3,
    paddingLeft: 12 * scale,
    paddingRight: 12 * scale,
    marginTop: 8 * scale,
    marginBottom: 8 * scale
  },
  tipsLine: {
    flex: 1,
    width: '100%',
    height: 1 * scale,
    backgroundColor: '#E1E1E1'
  },
  tips: {
    color: '#272727',
    fontSize: 12 * scale,
    marginLeft: 7 * scale,
    marginRight: 7 * scale,
  },
  productListWrap: {
    paddingLeft: 12 * scale,
    paddingRight: 12 * scale,
    flex: 1,
  },
  flatList: {
    flex: 1,
    backgroundColor: '#fff',
    borderRadius: 4 * scale
  },
  itemText: {
    fontSize: 13 * scale,
    opacity: .6,
    color: '#272727',
    marginRight: 8 * scale,
  },
  itemNumber: {
    fontSize: 13 * scale,
    color: '#272727',
    flex: 1,
  },
  selectIcon: {
    position: 'absolute',
    left: 0 * scale,
    top: 12 * scale,
    width: 50 * scale,
    height: '100%',
    zIndex: 9,
    flexDirection: 'row',
    paddingLeft: 12 * scale,
  },
  operateWrap: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: 52 * scale,
    paddingLeft: 12 * scale,
    paddingRight: 12 * scale,
  },
  operateBtn: {
    width: 51 * scale,
    height: 26 * scale,
    borderRadius: 2 * scale,
    marginLeft: 12 * scale,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#E9E9E9'
  },
  filterWrap: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: style.color.themeColor,
    paddingLeft: 22 * scale,
    paddingRight: 22 * scale,
    paddingTop: 10 * scale
  },
  departmentName: {
    height: 36 * scale,
    width: 110 * scale,
    borderRadius: 18 * scale,
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: 'rgba(255, 255, 255, .18)',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  searchInput: {
    backgroundColor: 'rgba(255, 255, 255, .18)',
    borderRadius: 18 * scale,
    height: 36 * scale,
    width: 210 * scale,
    color: '#fff',
    paddingLeft: 42 * scale,
    paddingRight: 10 * scale,
    paddingVertical: 0,
  },
  searchIcon: {
    width: 20 * scale,
    height: 20 * scale,
    position: 'absolute',
    left: 10 * scale,
    top: 9 * scale,
    zIndex: 9,
    opacity: 0.8,
  },
})